<template>
	<!-- 预约配置 -->
	<view class="page themeMask">
		<!-- 约人数 -->
		<block v-if="pageState == 0">
			<view class="flexColumn alignCenter mt60" v-if="makeStatus == 0">
				<view class="bold fz36 mb10">A03桌</view>
				<view class="fz28">请选择就餐人数</view>
			</view>
			<view class="flexColumn alignCenter mt60" v-if="makeStatus == 1">
				<view class="bold fz36 mb10">仅约桌</view>
				<view class="fz28">请选择就餐人数</view>
			</view>
			<view class="flexColumn alignCenter mt60" v-if="makeStatus == 2">
				<view class="bold fz36 mb10">预约点餐</view>
				<view class="fz28">请选择就餐人数</view>
			</view>
			<view class="numBox">
				<view class="every" :class="[current==index?'active':'']" @click="current=index"
					v-for="(item,index) in numArr" :key="index">
					{{item}}
				</view>
			</view>
			<view class="flex alignCenter justifyCenter mb20" v-if="pageState == 0 && makeStatus">
				<view class="startOrder border12 themeColor fff fz32 flex alignCenter justifyCenter"
					@click="pageState = 1">
					下一步</view>
			</view>
			<view class="flex alignCenter justifyCenter" v-if="pageState == 1 || !makeStatus">
				<view class="startOrder border12 themeColor fff fz32 flex alignCenter justifyCenter"
					@click="goUrl('/pages/core/pointMeal/pointMeal')">开始点餐</view>
			</view>
		</block>
		<!-- 约时间 -->
		<block v-else>
			<view class="flexColumn alignCenter mt60 mb60">
				<view class="bold fz36 mb10">仅约桌</view>
				<view class="fz28">请选择预计到店时间</view>
			</view>
			<view class="dataBox">
				<view class="flex alignCenter justifyBetween borderBtm28">
					<view class="fz32">日期选择</view>
					<view class="flex" @click="onSelectDate">
						<view class="fz28 mr14">请选择日期</view>
						<uv-icon name="arrow-right" color="#868d91" size="14"></uv-icon>
					</view>
				</view>
				<view class="flex alignCenter justifyBetween borderBtm28 mt60">
					<view class="fz32">时间选择</view>
					<view class="flex" @click="onSelectTime">
						<view class="fz28 mr14">请选择时间</view>
						<uv-icon name="arrow-right" color="#868d91" size="14"></uv-icon>
					</view>
				</view>
			</view>
			<view class="fz32 flex justifyCenter alignCenter mt100 mb120">
				联系方式
			</view>
			<view class="flex alignCenter justifyCenter mt20" @click="goUrl('/pages/core/mackDetails/mackDetails')"
				v-if="makeStatus == 1">
				<view class="startOrder border12 themeColor fff fz32 flex alignCenter justifyCenter">提交预约</view>
			</view>
			<view class="flex alignCenter justifyCenter mt20" @click="goUrl('/pages/core/pointMeal/pointMeal')" v-else>
				<view class="startOrder border12 themeColor fff fz32 flex alignCenter justifyCenter">开始点餐</view>
			</view>
		</block>
		<!-- 日期选择 -->
		<uv-calendar ref="selectDateRef" color="#75301e" rowHeight="40" mode="single"></uv-calendar>
		<!-- 时间选择 -->
		<uv-datetime-picker ref="selectTimeRef" v-model="value" mode="datetime">
		</uv-datetime-picker>
		<!-- 广告位 -->
		<view></view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	// 页面状态 0人数 1选择时间
	const pageState = ref(0)

	// 就餐人数
	const current = ref(0)
	const numArr = ref([
		1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
	])

	// 选择日期
	const selectDateRef = ref()
	const onSelectDate = () => {
		selectDateRef.value.open()
	}
	// 选择日期
	const value = ref(Number(new Date()))
	const selectTimeRef = ref()
	const onSelectTime = () => {
		selectTimeRef.value.open()
	}
	
	
	// 跳转
	const goUrl = (url) => {
		uni.navigateTo({
			url,
		})
	}

	// 状态
	const makeStatus = ref(null)
	onLoad(() => {
		// 获取点餐状态
		makeStatus.value = uni.getStorageSync('makeStatus')
		// 通过点餐状态动态设置标题
		uni.setNavigationBarTitle({
			title: makeStatus.value ? '预约配置' : '选择就餐人数'
		})

	})
</script>

<style lang="scss" scoped>
	// 就餐人数
	.numBox {
		display: flex;
		flex-wrap: wrap;
		padding: 60rpx;
		width: 100%;
		justify-content: space-between;
		align-items: center;

		.every {
			width: 120rpx;
			height: 120rpx;
			border: 4rpx solid #75301E;
			margin-right: 12rpx;
			margin-bottom: 40rpx;
			border-radius: 12rpx;
			color: #75301E;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.active {
			background-color: #75301E;
			color: #fff;
		}
	}

	// 下一步
	.startOrder {
		width: 500rpx;
		height: 90rpx;
	}

	// 日期选择
	.dataBox {
		padding: 0 48rpx;
	}
</style>